<template>
	<div class="orderDetaiwrap">
		<div class="orderDetaiwrap-title">
			<span>订单编号:1500000</span>
			<span>订单状态:<strong>待付款</strong></span>
			<span>立即支付</span>
			<span>取消订单</span>
		</div>
		<div class="orderDetaildiv-one">
			<div><span class="orderDetaildiv-one-span1">支付方式</span><span>支付宝</span></div>
			<div><span class="orderDetaildiv-one-span1">支付流水号</span><span>6554545748412415</span></div>
			<div><span class="orderDetaildiv-one-span1">下单时间</span><span>2015-2-20 16:45:05</span></div>
			<div><span class="orderDetaildiv-one-span1">支付时间</span><span></span></div>
			<div><span class="orderDetaildiv-one-span1">发货时间</span><span></span></div>
			<div><span class="orderDetaildiv-one-span1">收获时间</span><span></span></div>
			<div><span class="orderDetaildiv-one-span1">取消时间</span><span></span></div>
			<div><span class="orderDetaildiv-one-span1">申请退款时间</span><span></span></div>
			<div><span class="orderDetaildiv-one-span1">退款原因</span><span></span></div>
			<div><span class="orderDetaildiv-one-span1">退款时间</span><span></span></div>
			<div><span class="orderDetaildiv-one-span1">订单备注</span><span>希望包装严实一点，不要有破损情况</span></div>
		</div>
		<div class="orderDetaildiv-title">收货人信息</div>
		<div class="orderDetaildiv-one orderDetaildiv-two">
			<div><span class="orderDetaildiv-one-span1">收货人姓名</span><span>小路</span></div>
			<div><span class="orderDetaildiv-one-span1">地址</span><span>45151874512154</span></div>
			<div><span class="orderDetaildiv-one-span1">联系方式</span><span>手机:15503757093/固定电话:0375-660-5138</span></div>
		</div>
		<div class="orderDetaildiv-title">发票信息</div>
		<div class="orderDetaildiv-one orderDetaildiv-three">
			<div><span class="orderDetaildiv-one-span1">发票抬头</span><span>北京嘉禾影业有限公司</span></div>
			<div><span class="orderDetaildiv-one-span1">发票内容</span><span>明细</span></div>
		</div>
		<div class="orderDetaildiv-title">物流信息</div>
		<div class="orderDetaildiv-one orderDetaildiv-three">
			<div><span class="orderDetaildiv-one-span1">联系人:张小哥</span></div>
			<div><span class="orderDetaildiv-one-span2">联系方式:15254825625</span></div>
		</div>
		<div class="orderDetaildiv-title">卖家信息</div>
		<div class="orderDetaildiv-one orderDetaildiv-two">
			<div><span class="orderDetaildiv-one-span1">店铺名称</span><span>海澜之家旗舰店</span></div>
			<div><span class="orderDetaildiv-one-span1">真实姓名</span><span>小小路</span></div>
			<div><span class="orderDetaildiv-one-span1">联系电话</span><span>0345-412-5554</span></div>
		</div>
		<div class="orderfood">
			<div class="orderfoodTitle">
				<span>爱果果水果店</span>
				<span>规格</span>
				<span>单价</span>
				<span>数量</span>
				<span>金额</span>
			</div>
			<div class="orderfoodInner">
				<div>
					<span class="orderfoodInner-one">
						<span class="pic"></span>
						<span>云南大石榴 8个装</span>
					</span>
					<span class="orderfoodInner-two">8个装</span>
					<span class="orderfoodInner-three">￥569</span>
					<span class="orderfoodInner-four">1</span>
					<span class="orderfoodInner-five">￥569</span>
				</div>
				<div>
					<span class="orderfoodInner-one">
						<span class="pic"></span>
						<span>云南大石榴 8个装</span>
					</span>
					<span class="orderfoodInner-two">8个装</span>
					<span class="orderfoodInner-three">￥569</span>
					<span class="orderfoodInner-four">1</span>
					<span class="orderfoodInner-five">￥569</span>
				</div>
				<div>
					<span class="orderfoodInner-one">
						<span class="pic"></span>
						<span>云南大石榴 8个装</span>
					</span>
					<span class="orderfoodInner-two">8个装</span>
					<span class="orderfoodInner-three">￥569</span>
					<span class="orderfoodInner-four">1</span>
					<span class="orderfoodInner-five">￥569</span>
				</div>
			</div>
		</div>
		<div class="allmoney">实付金额：<strong>￥2977</strong></div>
		<div class="orderbutton"><span>立即支付</span><span>取消订单</span></div>
	</div>
</template>

<script>
</script>

<style>
	.orderDetaiwrap{
		width: 100%;
		border: 1px solid #c1c1c1;
	}
	.orderDetaiwrap-title{
		width: 100%;
		height: 57px;
		line-height: 57px;
		border-bottom: 1px solid #c1c1c1;
	}
	.orderDetaiwrap-title strong{
		color: #f08200;
		font-weight: normal;
	}
	.orderDetaiwrap-title span:nth-of-type(1){
		float: left;
		margin-left: 5%;
	}
	.orderDetaiwrap-title span:nth-of-type(2){
		float: left;
		margin-left: 17%;
	}
	.orderDetaiwrap-title span:nth-of-type(3){
		float: left;
		margin-left: 17%;
		width: 90px;
		height: 30px;
		line-height: 30px;
		margin-top: 14px;
		text-align: center;
		color: white;
		background: #498e3d;
	}
	.orderDetaiwrap-title span:nth-of-type(4){
		float: right;
		margin-right: 5%;
		width: 90px;
		height: 30px;
		line-height: 30px;
		margin-top: 14px;
		text-align: center;
		color: white;
		background: #c1c1c1;
	}
	.orderDetaildiv-one{
		width: 90%;
		height: 420px;
		border: 1px solid #c1c1c1;
		background: #f9f9f9;
		margin-top: 20px;
		margin-left: 5%;
	}
	.orderDetaildiv-one div{
		width: 100%;
		height: 38px;
		line-height: 38px;
		color: #8b8b8b;
	}
	.orderDetaildiv-one-span1{
		float: left;
		width: 15%;
		margin-left: 3%;
	}
	.orderDetaildiv-one-span2{
		margin-left: 3%;
	}
	.orderDetaildiv-title{
		width: 90%;
		height: 52px;
		line-height: 52px;
		color: #7aa873;
		margin-left: 5%;
	}
	.orderDetaildiv-two{
		height: 126px;
		margin-top: 0px;
	}
	.orderDetaildiv-three{
		height: 90px;
		margin-top: 0px;
	}
	.orderfood{
		width: 90%;
		height: 412px;
		margin-left: 5%;
		border: 1px solid #c1c1c1;
		margin-top: 20px;
	}
	.orderfoodTitle{
		width: 100%;
		height: 46px;
		line-height: 46px;
		font-size: 18px;
		background: #c1c1c1;
	}
	.orderfoodTitle span:nth-of-type(1){
		float: left;
		width: 30%;
		margin-left: 3%;
	}
	.orderfoodTitle span:nth-of-type(2){
		float: left;
		width: 16%;
	}
	.orderfoodTitle span:nth-of-type(3){
		float: left;
		width: 16%;
	}
	.orderfoodTitle span:nth-of-type(4){
		float: left;
		width: 16%;
	}
	.orderfoodTitle span:nth-of-type(5){
		float: right;
		width: 16%;
		margin-right: 3%;
	}
	.orderfoodInner div{
		width: 100%;
		height: 120px;
		line-height: 120px;
		border-top: 1px solid #c1c1c1;
	}
	.orderfoodInner-one{
		float: left;
		width:30% ;
		margin-left: 3%
	}
	.pic{
		float: left;
		width: 78px;
		height: 78px;
		margin-top: 20px;
		border: 1px solid #c1c1c1;
		background:url("../assets/img/banner-13.png") no-repeat;
		background-size: 100% 100%;
	}
	.orderfoodInner-two{
		float: left;
		width: 16%;
	}
	.orderfoodInner-three{
		float: left;
		width: 16%;
	}
	.orderfoodInner-four{
		float: left;
		width: 16%;
	}
	.orderfoodInner-five{
		float: left;
		width: 16%;
	}
	.allmoney{
		height: 104px;
		line-height: 104px;
		text-align: right;
		margin-right: 5%;
	}
	.allmoney strong{
		font-weight: normal;
		color: #ff5757;
	}
	.orderbutton{
		width: 100%;
		height: 48px;
		margin-bottom: 20px;
	}
	.orderbutton span{
		float: right;
		width: 152px;
		height: 48px;
		line-height: 48px;
		background: #f08200;
		color: white;
		border-radius: 5px;
		text-align: center;
		margin-right: 5%;
		cursor: pointer;
	}
	.orderbutton span:nth-of-type(2){
		background: #c1c1c1;
	}
</style>
